<template>
  <div class="message-custom">
    <MessageCustomerService
      v-if="isCustomerServiceMessage(props.message)"
      :message="props.message"
      @sendMessage="sendTextMessage"
    />
    <MessageRating
      v-else-if="isMessageRating(props.message)"
      :message="props.message"
      @sendMessage="sendCustomMessage"
    />
  </div>
</template>
<script lang="ts">
import TUICore, { TUIConstants } from "@tencentcloud/tui-core";
import { isCustomerServiceMessage, isMessageRating } from './utils/index';
import { CustomMessagePayload, TextMessagePayload, IMessageModel } from "./interface";
import MessageCustomerService from "./components/message-customer-service.vue";
import MessageRating from "./components/message-rating/index.vue";

interface Props {
  message: IMessageModel,
}
export default {
  props: ["message"],
  components: {
    MessageCustomerService,
    MessageRating,
  },
  setup(props: Props) {
    const sendTextMessage = (payload: TextMessagePayload) => {
      TUICore.callService({
        serviceName: TUIConstants.TUIChat.SERVICE.NAME,
        method: TUIConstants.TUIChat.SERVICE.METHOD.SEND_TEXT_MESSAGE,
        params: { payload },
      });
    }
    const sendCustomMessage = (payload: CustomMessagePayload) => {
      TUICore.callService({
        serviceName: TUIConstants.TUIChat.SERVICE.NAME,
        method: TUIConstants.TUIChat.SERVICE.METHOD.SEND_CUSTOM_MESSAGE,
        params: { payload },
      });
    }
    return {
      props,
      sendTextMessage,
      sendCustomMessage,
      isCustomerServiceMessage,
      isMessageRating,
    }
  }
};
</script>